<!DOCTYPE html>
<html>
<head>
    <title>超级挫折扭蛋机</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
        body {
            font-family: 'Ma Shan Zheng', cursive;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            text-align: center;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        h1 {
            color: #ff6b6b;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            font-size: 2.5rem;
        }
        .machine-container {
            position: relative;
            width: 100%;
            height: 500px;
            margin: 20px auto;
        }
        .machine-image {
            width: 100%;
            max-width: 400px;
            height: auto;
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
        }
        /* 3D金属摇杆样式 */
        .handle {
            position: absolute;
            width: 60px;
            height: 30px;
            right: 80px;
            bottom: 120px;
            background: linear-gradient(145deg, #FFD700 20%, #FFEC8B 80%);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            transform: rotate(-20deg) perspective(500px) rotateX(15deg);
            box-shadow: 
                3px 3px 5px rgba(0,0,0,0.2),
                inset 2px 2px 4px rgba(255,255,255,0.5),
                inset -2px -2px 4px rgba(0,0,0,0.1);
            border: 2px solid #E6C200;
            z-index: 10;
            animation: glow 2s infinite alternate;
        }
        .handle:hover {
            transform: rotate(0deg) perspective(500px) rotateX(15deg);
            background: linear-gradient(145deg, #FFEC8B 20%, #FFD700 80%);
            box-shadow: 
                5px 5px 8px rgba(0,0,0,0.3),
                inset 2px 2px 4px rgba(255,255,255,0.7),
                inset -3px -3px 6px rgba(0,0,0,0.2);
            animation: none;
        }
        .handle:active {
            transform: rotate(10deg) perspective(500px) rotateX(15deg) translateY(2px);
            box-shadow: 
                1px 1px 2px rgba(0,0,0,0.2),
                inset 3px 3px 5px rgba(0,0,0,0.1);
        }
        @keyframes glow {
            from { box-shadow: 0 0 5px rgba(255,215,0,0.5); }
            to { box-shadow: 0 0 20px rgba(255,215,0,0.8); }
        }
        .handle::after {
            content: "";
            position: absolute;
            top: 5px;
            left: 10%;
            width: 30%;
            height: 40%;
            background: linear-gradient(
                to right,
                rgba(255,255,255,0.8) 0%,
                rgba(255,255,255,0) 100%
            );
            border-radius: 50%;
            transform: rotate(45deg);
            filter: blur(1px);
        }
        .egg {
            position: absolute;
            width: 80px;
            height: 100px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120"><path d="M50 0c20 0 40 30 40 70s-20 50-40 50S10 90 10 50 30 0 50 0z" fill="%23FFD166"/><text x="50" y="60" font-family="Arial" font-size="14" text-anchor="middle" fill="%23000">?</text></svg>') no-repeat;
            background-size: contain;
            left: 50%;
            bottom: 80px;
            transform: translateX(-50%);
            display: none;
            z-index: 5;
        }
        .egg-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            background: white;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            display: none;
            z-index: 20;
        }
        .custom-form {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin: 30px auto;
            max-width: 500px;
        }
        textarea, input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-family: inherit;
        }
        button {
            background: #ff6b6b;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s;
        }
        button:hover {
            background: #ff5252;
            transform: translateY(-2px);
        }
        .loading {
            color: #666;
            font-size: 1.2rem;
            margin: 20px 0;
        }
        @keyframes eggDrop {
            0% { transform: translate(-50%, -200px) rotate(0deg); opacity: 0; }
            50% { transform: translate(-50%, 0) rotate(180deg); }
            100% { transform: translate(-50%, 0) rotate(360deg); opacity: 1; }
        }
        /* 手机适配 */
        @media (max-width: 600px) {
            .machine-image { max-width: 300px; }
            .handle { 
                width: 50px;
                height: 25px;
                right: 60px;
                bottom: 90px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌈 数学逆袭扭蛋机</h1>
        
        <div class="machine-container">
            <!-- 使用示例图片（替换成你的图片路径） -->
            <img src="https://s21.ax1x.com/2025/05/17/pEvN8Vx.jpg" alt="扭蛋机" class="machine-image">
            <div class="handle" onclick="playGashapon()"></div>
            <div class="egg" id="egg"></div>
            <div class="egg-content" id="eggContent">
                <h3 id="eggTitle">扭蛋内容</h3>
                <p id="eggText"></p>
                <div id="eggImage"></div>
            </div>
        </div>
        
        <div id="status" class="loading">准备就绪，点击摇杆开始游戏！</div>
        
        <div class="custom-form">
            <h2>创建你的专属扭蛋机</h2>
            <input type="text" id="problemInput" placeholder="输入你的挫折（如：数学考试不及格）">
            <textarea id="solutionsInput" placeholder="输入应对方法，每条用逗号隔开（如：分析错题,请教老师,每天练习）"></textarea>
            <button onclick="createCustomGashapon()">生成我的扭蛋机</button>
        </div>
    </div>

    <audio id="soundEffect" src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3"></audio>
    <audio id="winSound" src="https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3"></audio>

    <script>
        // 检查音效是否加载
        function checkAudio() {
            const status = document.getElementById("status");
            try {
                const sound = document.getElementById("soundEffect");
                sound.volume = 0.5;
                status.innerHTML = "✅ 系统准备就绪，点击摇杆开始游戏！";
            } catch (e) {
                status.innerHTML = "⚠️ 音效加载失败（需要网络连接），但游戏仍可进行";
            }
        }
        
        // 默认扭蛋内容
        const defaultTips = {
            "数学考试没考好": [
                "💡 调整心态：一次失败≠永远失败",
                "📝 错题分析：整理错题本重点突破",
                "📚 制定计划：每天练习同类题目",
                "👩‍🏫 请教老师：不懂就问不丢脸",
                "👫 组队学习：和同学一起进步",
                "🎯 小目标：下次提高10分",
                "⏰ 时间管理：每天专注数学30分钟"
            ],
            "被同学误解": [
                "💬 主动沟通：心平气和说清楚",
                "🕊️ 保持冷静：不急着反驳",
                "👂 换位思考：理解对方感受",
                "🤝 找共同朋友帮忙调解",
                "📅 给彼此冷静时间",
                "🌈 记住：误会总会解开"
            ]
        };

        let currentTips = [...defaultTips["数学考试没考好"]];
        
        // 播放扭蛋音效
        function playSound() {
            try {
                const sound = document.getElementById("soundEffect");
                sound.currentTime = 0;
                sound.play();
            } catch (e) {
                console.log("音效播放失败");
            }
        }
        
        // 播放成功音效
        function playWinSound() {
            try {
                const sound = document.getElementById("winSound");
                sound.currentTime = 0;
                sound.play();
            } catch (e) {
                console.log("音效播放失败");
            }
        }
        
        // 扭蛋机主函数
        function playGashapon() {
            const status = document.getElementById("status");
            status.innerHTML = "🎮 游戏中...";
            
            playSound();
            
            const egg = document.getElementById("egg");
            const eggContent = document.getElementById("eggContent");
            const eggText = document.getElementById("eggText");
            
            // 隐藏之前的内容
            egg.style.display = "none";
            eggContent.style.display = "none";
            
            // 随机选择一条提示
            const randomIndex = Math.floor(Math.random() * currentTips.length);
            const selectedTip = currentTips[randomIndex];
            
            // 显示扭蛋动画
            egg.style.animation = "none";
            void egg.offsetWidth; // 触发重绘
            egg.style.animation = "eggDrop 1s ease-out";
            egg.style.display = "block";
            
            // 显示扭蛋内容
            setTimeout(() => {
                egg.style.display = "none";
                eggText.innerHTML = selectedTip;
                
                // 根据内容显示不同表情
                const eggImage = document.getElementById("eggImage");
                eggImage.innerHTML = "";
                
                if (selectedTip.includes("💡") || selectedTip.includes("🌈")) {
                    eggImage.innerHTML = '<img src="https://img.icons8.com/color/96/000000/happy.png" alt="开心">';
                } else if (selectedTip.includes("📝") || selectedTip.includes("📚")) {
                    eggImage.innerHTML = '<img src="https://img.icons8.com/color/96/000000/thinking-face.png" alt="思考">';
                } else {
                    eggImage.innerHTML = '<img src="https://img.icons8.com/color/96/000000/ok.png" alt="OK">';
                }
                
                document.getElementById("eggTitle").textContent = "你的应对法宝";
                eggContent.style.display = "block";
                playWinSound();
                status.innerHTML = "✨ 获得新方法！再玩一次？";
            }, 1000);
        }
        
        // 创建自定义扭蛋机
        function createCustomGashapon() {
            const problem = document.getElementById("problemInput").value.trim();
            const solutionsText = document.getElementById("solutionsInput").value.trim();
            const status = document.getElementById("status");
            
            if (!problem || !solutionsText) {
                status.innerHTML = "⚠️ 请填写挫折和应对方法！";
                return;
            }
            
            const solutions = solutionsText.split(/[,，]/).map(s => s.trim()).filter(s => s);
            
            if (solutions.length < 3) {
                status.innerHTML = "⚠️ 请至少提供3种应对方法，用逗号隔开";
                return;
            }
            
            // 添加到扭蛋内容
            defaultTips[problem] = solutions;
            currentTips = [...solutions];
            
            // 更新标题
            document.querySelector("h1").textContent = `🌈 ${problem}扭蛋机`;
            
            status.innerHTML = `✅ "${problem}"扭蛋机已生成！点击摇杆试试吧~`;
        }
        
        // 页面加载完成后初始化
        window.onload = function() {
            checkAudio();
        };
    </script>
</body>
</html>